// 导入XtxMessage.vue组件
// 通过代码的方式去渲染它
import { h, render } from 'vue'
import { Message } from './type'
import XtxMessage from './XtxMessage.vue'

// 创建一个dom容器
// 把这个容器添加在body上
const div = document.createElement('div')
div.className = "xtx-message-container"
document.body.appendChild(div)


let time = -1
// 调用这个函数
  // h的作用是: 产生虚拟DOM
  // render 的作用是将虚拟的DOM渲染成真实的DOM中
export default function Message(obj: Message){
  const vNode = h(XtxMessage, { type: obj.type, text: obj.text})
  // 把虚拟dom放入上面定义的容器中
  render(vNode, div)
  // 清除定时器
  clearTimeout(time)
  time = window.setTimeout(()=>{
    render(null,div)
  },obj.duration||3000)
}

Message.success =(value:string)=>{{
  Message({ type:"success",text:value , duration: 1500})
}}
Message.error =(value:string)=>{{
  Message({ type:"error",text:value , duration: 1500})
}}
Message.warning =(value:string)=>{{
  Message({ type:"warning",text:value , duration: 1500})
}}